<template>
  <div>
    <h1>News</h1>
    <button @click="toDetail('娱乐')">娱乐新闻</button>
    <button @click="toDetail('体育')">体育新闻</button>
    <button @click="toDetail('军事')">军事新闻</button>
    <button @click="toDetail('政治')">政治新闻</button>
    <button @click="toDetail('游戏')">游戏新闻</button>
    <button @click="toDetail('八卦')">八卦新闻</button>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'News',
});
</script>

<script setup lang="ts">
import { useRouter } from 'vue-router';

/* 
 useRouter
   返回 router 实例，相当于在模板中使用 $router ，必须在setup() 中调用
*/
const router = useRouter();
const toDetail = (type: string) => {
  router.push({
    name: 'Detail',
    params: {
      type,
    },
  });
};
</script>

<style scoped lang="scss"></style>
